<template>
  <div class="form" :style="{ height: `${bodyH}px` }">
    <!-- 登录表单 -->
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      size="medium "
      class="demo-ruleForm"
    >
      <p class="center">系统登录</p>
      <el-form-item label="账号" prop="userName">
        <el-input
          type="text"
          prefix-icon="iconfont icon-zhanghao"
          clearable
          v-model="loginForm.userName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          :type="isShowPass ? 'text' : 'password'"
          prefix-icon="iconfont icon-suoding"
          v-model="loginForm.password"
          autocomplete="off"
        >
          <i
            slot="suffix"
            class="icon-pass"
            @click="setShowPass"
            :class="[
              'iconfont',
              isShowPass ? 'icon-yanjing' : 'icon-biyanjing',
            ]"
          ></i
        ></el-input>
      </el-form-item>
      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="login()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
import router from "../router";
import request from "@/utils/request";
import { create } from "domain";

export default {
  name: "Login",
  data() {
    return {
      bodyH: window.innerHeight,
    //   bodyH: document.body.offsetHeight,
      loginForm: {
        password: "", // 密码
        userName: "", // 账号
      },
      /**
       * el-表单验证
       * */
      rules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      isShowPass: false,
    };
  },
  created(){
    console.log("res",this.bodyH);
  },
  methods: {
    // 密码显示隐藏
    setShowPass() {
      if (this.isShowPass) {
        this.isShowPass = false;
      } else {
        this.isShowPass = true;
      }
    },
    // 登录逻辑
    login() {
      // 选中表单调用validate 对整个对象进行验证方法
      this.$refs.loginForm.validate((v) => {
        if (v) {
          request.post("/user/login", this.loginForm).then((res) => {
            console.log(res);
            if (res.success) {
              sessionStorage.setItem("realName", res.data.realName);
              this.$router.push("/");
              this.$message({
                message: "登录成功！",
                type: "success",
              });
            }
          });
        } else {
          this.$message({
            message: "请输入正确的账号密码!",
            type: "warning",
          });
        }
      });
    },
  },
};
</script>
  
  <style lang="less">
.form {
  width: 100%;
  //   height: 100%;
  background-color: #2b3d49;
  display: flex;
  justify-content: center;
}
.center {
  color: white;
  font-weight: 800;
  font-size: 30px;
  text-align: center;
  margin-left: 85px;
}
form {
  align-self: center;
}
.icon-pass {
  cursor: pointer;
}
.el-input--medium .el-input__inner {
  height: 40px;
}
.el-form-item__label {
  color: white;
}
.el-button--medium {
  width: 400px;
}
</style>